<template>
  <x-border title="添加教程" type="brand">
    <div class="admin-tutorial-add" v-if="async">
      <el-form class="tutorial-form" :model="viewModel">
        <el-form-item label="标题" :required="true">
          <el-input v-model="viewModel.title"></el-input>
          <div class="tutorial-form_intro">请输入教程名称（必填项）</div>
        </el-form-item>
        <el-form-item label="分类" :required="true">
          <x-relation-select :multiple="false" :isDiy="true" type="TutorialClassRelation" label="教程类别" v-model="viewModel.classId"></x-relation-select>
          <div class="tutorial-form_intro">请选择教程类别（必填项）</div>
        </el-form-item>
        <el-form-item label="参考视频">
          <x-video-select v-model="viewModel.vedioUrl " :count="1"></x-video-select>
          <div class="tutorial-form_intro">上传试看视频，视频大小不超过3G，建议时长10~30分钟</div>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" v-model="viewModel.intro "></el-input>
          <div class="tutorial-form_intro">请录入文字描述，最多不超过200个字</div>
        </el-form-item>
      </el-form>
      <x-line title="方法/步骤"></x-line>
      <div class="steps-box">
        <ul class="steps-box-ul">
          <draggable v-model="viewModel.steps">
            <li class="steps-box-li" v-for="(sItem,sIndex) in viewModel.steps" :key="sIndex">
              <div class="li_number">{{sIndex+1}}</div>
              <div class="li_p">
                <el-input placeholder="点击这里输入注意事项" v-model="sItem.title"></el-input>
                <div class="li_upload">
                  <x-tutorrial-upload ref="xTutorrialUpload" v-model="sItem.images" :bg_color="'#ecf8ff'" :limit="5"></x-tutorrial-upload>
                </div>
              </div>
              <div class="li_action">
                <i class="el-icon-rank"></i>
                <i class="el-icon-plus" @click="matterAdd('steps')"></i>
                <i class="el-icon-close" @click="matterDelete('steps',sIndex)"></i>
              </div>
            </li>
          </draggable>
        </ul>
        <div class="tutorial-buts steps-buts" @click="matterAdd('steps')"><i class="el-icon-plus"></i>添加步骤方法</div>
      </div>
      <x-line title="注意事项"></x-line>
      <div class="tutorial-conter">
        <ul class="tutorial-ul">
          <li class="tutorial-li" v-for="(noItem,noIndex) in viewModel.notes" :key="noIndex">
            <span class="tutorial-li_disc"></span>
            <el-input class="tutorial-li_ipt" placeholder="点击这里输入注意事项" v-model="viewModel.notes[noIndex]"></el-input>
            <i class="el-icon-close" @click="matterDelete('notes',noIndex)"></i>
          </li>
        </ul>
        <div class="tutorial-buts" @click="matterAdd('notes')"><i class="el-icon-plus"></i>添加注意事项</div>
      </div>
      <x-line title="相关教程"></x-line>
      <div class="tutorial-conter">
        <ul class="tutorial-ul">
          <li class="tutorial-li" v-for="(tuItem,tuIndex) in viewModel.relaitons" :key="tuIndex">
            <span class="tutorial-li_disc"></span>
            <div class="tutorial-li_cet">
              <x-data-select v-model="viewModel.relaitons[tuIndex]" type="CourseColumnTable" title="选择课程"></x-data-select>
            </div>
            <i class="el-icon-close" @click="matterDelete('relaitons',tuIndex)"></i>
          </li>
        </ul>
        <div class="tutorial-buts" @click="matterAdd('relaitons')"><i class="el-icon-plus"></i>添加相关教程</div>
      </div>
      <el-form class="buttom-tab">
        <el-form-item label=" ">
          <el-button type="primary" @click="save" :loading="isLoading">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </x-border>
</template>
<script>
  import draggable from 'vuedraggable'
  import ala from 'ala'
  export default {
    components: {
      draggable
    },
    data () {
      return {
        viewModel: {
          intro: '',
          title: '',
          classId: 0,
          notes: ['', '', ''],
          relaitons: ['', ''],
          steps: [{ title: '', images: [] }, { title: '', images: [] }, { title: '', images: [] }]
        },
        async: false,
        isLoading: false
      }
    },
    created () {
      this.init()
    },
    methods: {
      async init () {
        if (this.$route.query.id) {
          let para = {
            id: this.$route.query.id
          }
          let result = await ala.diyHttpGet('api/Tutorial/querylist', para)
          if (result) {
            this.viewModel = result[0]
          }
          this.async = true
        } else {
          this.async = true
        }
      },
      matterAdd (type) {
        if (type === 'notes') {
          this.viewModel.notes.push('')
        } else if (type === 'relaitons') {
          this.viewModel.relaitons.push('')
        } else {
          this.viewModel.steps.push({ title: '', images: [] })
        }
      },
      pasteChange (data, index) {
        this.viewModel.steps[index].images.push('https://diyapi.5ug.com' + data.path)
        // this.$refs.xTutorrialUpload[index].pasteChange(data, index)
      },
      matterDelete (type, dIndex) {
        if (type === 'notes') {
          this.viewModel.notes.splice(dIndex, 1)
        } else if (type === 'relaitons') {
          this.viewModel.relaitons.splice(dIndex, 1)
        } else {
          this.viewModel.steps.splice(dIndex, 1)
        }
      },
      async save () {
        this.isLoading = true
        if (this.viewModel.classId <= 0) {
          this.$ala.error('教程分类不能为空')
          this.isLoading = false
          return
        }
        let response = await ala.diyHttpPost('Api/Tutorial/QuerySave', this.viewModel)
        if (response) {
          this.$ala.toMessage(response)
        }
        var this_ = this
        setTimeout(() => {
          this_.isLoading = false
        }, 200)
      }
    }
  }
</script>
<style lang="scss">
  @import "./var.scss";
</style>